<template>
  <div class="app-container" v-if="canDisplay">
    <el-row>
      <el-col class="nav-col" :span="3">
        <div class="nav-container">
          <div class="title">
            <h3>人生得意须尽欢</h3>
          </div>

          <!-- 左侧的菜单栏 -->
          <el-menu
            v-if="menuTreelist != undefined"
            background-color="#004d73"
            text-color="#fff"
            active-text-color="#ffd04b"
            default-active="/index/userinfo"
            class="el-menu-vertical-demo"
            unique-opened
            @select="handleSelect"
          >
            <div v-for="(item,index) in menuTreelist" :key="index">
              <el-menu-item v-if="item.child.length == 0" :index="item.routerpath">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.menuname }}</span>
              </el-menu-item>
              <el-submenu v-if="item.child.length != 0" :index="item.menuidx">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span>{{ item.menuname }}</span>
                </template>
                <el-menu-item
                  v-for="item2 in item.child"
                  :key="item2.menuid"
                  :index="item2.routerpath"
                >
                  <i :class="item2.icon"></i>
                  <span>{{ item2.menuname }}</span>
                </el-menu-item>
              </el-submenu>
            </div>
          </el-menu>
        </div>
      </el-col>
      <el-col class="col-right" :span="21">
        <div class="content-header">
          <el-row>
            <el-col :span="12">
              <div class="bread-container">
                <el-breadcrumb class="breadcromb" separator="/">
                  <el-breadcrumb-item v-for="(item, index) in breadcrumbOpts" :key="index">{{item}}</el-breadcrumb-item>
                </el-breadcrumb>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="log-out">
                <el-button type="danger" size="mini" plain @click="logout">退出登录</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="content">
          <transition name="slide">
            <router-view></router-view>
          </transition>
        </div>
        <div class="content-footer">
          <span>
            Designed by 龚科奥 , QQ: 694389397 , Email:
            gkafighting@163.com
          </span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 是否显示菜单(菜单数据加载完成才能显示)
      canDisplay: false,
      // 菜单数据
      menuTreelist: undefined,
      // 面包屑数据
      breadcrumbOpts: ["首页", "系统管理", "菜单管理"],
    };
  },

  methods: {
    logout() {
      this.$confirm("确认退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          sessionStorage.removeItem("loginMsg");
          this.$router.push({
            path: "/",
          });
        })
        .catch(() => {});
    },

    handleSelect(key) {
      this.$router.push({
        path: key,
      });
    },
  },
  created() {
    // 用户未登录则跳转到登录界面,登陆了才能显示本页面内容
    if (!sessionStorage.getItem("loginMsg")) {
      this.$message.error("您未登录,请先登录");
      this.$router.push({
        path: "/",
      });
    } else {
      this.canDisplay = true;
    }
    this.gGet("/menu/getmenu", {}).then((res) => {
      // 对菜单数据进行转化成树形结构
      this.menuTreelist = this.handleMenuTree(res.data);
    });
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}

.col-right {
  padding: 0;
}

.title {
  width: 100%;
  height: 8vh;
  line-height: 8vh;
  text-align: center;
}

.title > h3 {
  color: aliceblue;
}

.content {
  width: 100%;
  background-color: #fff;
  height: 90vh;
  padding: 20px;
}

.content-header {
  width: 100%;
  background-color: #eff3f6;
  height: 6vh;
}

.nav-container {
  position: relative;
  height: 100vh;
  background-color: #004d73;
}

.el-menu-vertical-demo {
  border-right: 0 !important;
}

.log-out {
  /* width: 100%; */
  position: absolute;
  right: 30px;
  height: 6vh;
  line-height: 6vh;
  /* bottom: 30px; */
}

.bread-container {
  width: 100%;
  height: 6vh;
  line-height: 6vh;
  padding-left: 20px;
}

.breadcromb {
  width: 100%;
  height: 6vh;
  line-height: 6vh;
}

.content-footer {
  background-color: #eff3f6;
  text-align: center;
  line-height: 4vh;
  height: 4vh;
  width: 100%;
}

.content-footer > span {
  color: #004d73;
}

.box-card {
  width: 100%;
  height: 87vh;
}
</style>
